<template>
  <div class="page_account" id="account_login">
    <div class="warp">
      <div class="container">
        <div class="row flex_cc">
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
              <div class="forget_container">
                <b-form>
                  <b-form-group id="input-group-1" label="用户名:" label-for="input-1" :state="validation_username"
                    invalid-feedback="账户名长度为在5-16个字符" valid-feedback="校验通过">
                    <b-form-input id="input-1" v-model="form.username" type="text" placeholder="用户名" trim>
                    </b-form-input>
                  </b-form-group>

                  <b-form-group id="input-group-2" label="密码:" label-for="input-2" :state="validation_password"
                    invalid-feedback="密码长度为在5-16个字符" valid-feedback="校验通过">
                    <b-form-input id="input-2" v-model="form.password" type="password" placeholder="密码" trim>
                    </b-form-input>
                  </b-form-group>

                  <b-form-group id="input-group-2" label="确认密码:" label-for="input-2"
                    :state="validation_confirm_password" invalid-feedback="两次密码不一致" valid-feedback="校验通过">
                    <b-form-input id="input-2" v-model="form.confirm_password" type="password" placeholder="密码" trim>
                    </b-form-input>
                  </b-form-group>
                  <b-form-group id="input-group-2" label="邮箱:" label-for="input-2" :state="validation_email"
                    invalid-feedback="邮箱格式example@123.com" valid-feedback="">
                    <b-form-input id="input-2" v-model="form.email" type="email" placeholder="邮箱" trim></b-form-input>
                  </b-form-group>

                  <b-form-group id="input-group-2" label="验证码:" label-for="input-2" :state="validation_code"
                    invalid-feedback="验证码错误">
                    <b-input-group>
                      <b-form-input id="input-2" v-model="code" type="text" placeholder="验证码" trim>
                      </b-form-input>
                      <b-input-group-append>
                        <b-button variant="success" :style="{ paddingTop: '2px !important' }">发送验证码</b-button>
                      </b-input-group-append>
                    </b-input-group>
                  </b-form-group>
                  <div class="btns_bottom">
                    <div class="btn_item" @click="forgot()">找回密码</div>
                  </div>
                </b-form>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="card flex_cc">
              <div class="more_nav">
                <div style="text-align: center; margin-bottom: 20px">
                  没有账户?
                </div>
                <div class="btn_item" @click="$nav('/account/register')">
                  创建一个账户
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        form: {
          username: "",
          password: "",
          confirm_password: "",
          email: "",
        },
        code: "",
      };
    },
    onLoad() {},
    onReady() {},
    methods: {
      /**
       * 忘记密码
       * @param {Object} form
       */
      forgot() {
        var condition =
          this.validation_username &&
          this.validation_password &&
          this.validation_confirm_password &&
          this.validation_email &&
          this.validation_code;
        if (!condition) {
          this.$toast("输入不合法");
          return;
        }
        this.$post("~/api/forgot?", this.form, (res) => {
          console.log(this.form);
          var condition =
            this.form.username &&
            this.form.password &&
            this.form.confirm_password;
          if (condition) {
            if (res.result) {
              this.$nav("/account/login");
            } else if (res.error) {
              this.$toast(res.error.message);
            }
          }
        });
      },

      /**
       * 手动重置表单
       */
      resetForm() {
        this.$refs.form.resetFields();
      },
    },
    computed: {
      // 验证用户名
      validation_username() {
        var length = this.form.username.length;
        if (!length) {
          return null;
        }
        return length > 4 && length < 17;
      },
      // 验证密码
      validation_password() {
        var length = this.form.password.length;
        if (!length) {
          return null;
        }
        return length > 4 && length < 17;
      },
      //再次验证密码
      validation_confirm_password() {
        var length = this.form.confirm_password.length;
        if (!length) {
          return null;
        }
        return this.form.confirm_password === this.form.password;
      },
      //验证邮箱
      validation_email() {
        var length = this.form.email.length;
        if (!length) {
          return true;
        }
        return length > 4 && length < 17;
      },
      //验证验证码
      validation_code() {
        var length = this.code.length;
        if (!length) {
          return null;
        }
        return length === 4;
      },
    },
  };
</script>

<style scoped>
  .card {
    word-wrap: break-word;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .page_account {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .flex_cc {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .forget_container {
    width: 80%;
  }

  .more_nav {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 80%;
  }

  .more_nav .btns_bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .btn_item {
    cursor: pointer;
    width: 100%;
    background-color: var(--color_primary);
    color: #fff;
    text-align: center;
    height: 48px;
    line-height: 48px;
  }

  .forgot_nav {
    text-align: left;
    font-size: 10px;
    margin-top: 20px;
    cursor: pointer;
  }
</style>
